<template>
  <div class="app-main" id="micro">
    <div class="left" :style="styles">
      <query @querystyle="styleChange"></query>
    </div>
    <div class="right">
      <div class="map-tool">
        <map-tool :image="toolImageParams"></map-tool>
      </div>
      <!-- 盛放地图的容器 -->
      <div class="content">
        <layer></layer>
      </div>
    </div>
  </div>
</template>

<script>
import Query from './query/index'
import MapTool from '@/components/MapTool/tool' // 地图工具栏组件
import Layer from './map/index' // 地图组件
export default {
  name: 'micro',
  components: {
    Query,
    MapTool,
    Layer // 地图组件
  },
  data () {
    return {
      toolImageParams: {
        el: 'map', // 所需要截图的元素id
        insertEl: 'micro' // 插入截图的元素id
      }, // 截图传递的参数
      styles: {} // query组件样式
    }
  },
  mounted () {},
  created () {},
  methods: {
    styleChange (style) {
      this.styles = style
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-main {
  width: 100%;
  height: 100%;
  position: relative;
  .left {
    position: absolute;
    left: 50px;
    min-height: 50px;
    max-height: calc(100% - 50px);
    top: 25px;
    z-index: 401;
  }
  .right {
    height: 100%;
    width: 100%;
    background: #ccc;
    .map-tool {
      position: absolute;
      right: 50px;
      top: 25px;
      z-index: 401;
    }
    .content {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
